<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.clearFix::after{
			content: "";
			clear: both;
			display: block;
		}
		.box{
			width: 100%;
			height: 820px;
			text-align: center;
			background-image: url("https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg");
		}
		.header{
			width: 1300px;
			height: 30px;
			margin: 0 170px;
			padding: 20px 0;
			margin: 0 auto;
		}
		.header-one{
			float: left;
		}
		.header-tow{
			float: left;
			padding-left: 10px;
		}
		.header-three{
			float: right;
		}
		.header-one img{
			width: 70px;
			height: 25px;
		}
		.header-tow img{
			width:30px ;
			height: 30px;
		}
		.header-three span{
			color: #bfbfbf;
		}
		.header-three a{
			text-decoration: none;
			color: white;
		}
		.over:hover{
			color: blue;
		}
		.contene-bottom{
			position: absolute;
			margin: 0 auto;
		}
		.f{
			width: 170px;
			height: 50px;
			line-height: 50px;
			float: left;
			margin: 0 20px;
			background-color: blue;
			border-radius: 10px;
			position:relative;
			left: 20%;
			top: 60px;
		}
		.f>img{
			width: 24px;
			height: 24px;
			vertical-align: middle;
		}
		.f>a{
			text-decoration: none;
			color: white;

		}
		.content{	
			position: absolute;
			left: 0;
			top: 20%;
			width: 100%;
			text-align: center;
			z-index: 2;
		}
		.content-top>img{
			width: 600px;
			height: 200px;
		}
		.content-bottom>img{
			width: 24px;
			height: 24px;
		}
		.qqq{
			position: sticky;
			bottom: 0;
			background-color: white;
			height: 65px;
			width: 100%;
			text-align: center;
		}
		.qqq>div>a{
			text-decoration: none;
			color: #999;
		}
		.xu{
			transition: all 0.8s;
			overflow: hidden;
		}
		.xu:hover{
			height: 100px;
			margin-top: -25px;
		}
		.xu:hover>img{
			display:none;
		}
		.xu:hover>a{
			display: none;
		}

		.mmm{
			color: ;
			display: none;
		}
		.xu:hover .mmm{
			display: block;
		}




	</style>
</head>
<body>

<div>
	<div class="box">

		<div class="header clearFix">

			<div class="header-one">
			<img src="https://mdn.alipayobjects.com/huamei_gk2yv1/afts/img/A*D2VVQIehGhwAAAAAAAAAAAAADneBAQ/original">
			</div>

			<div class="header-tow">
			<img src="https://img.alicdn.com/tfs/TB1DeJxnAY2gK0jSZFgXXc5OFXa-86-64.png">
			</div>

			<div class="header-three clearFix">
			<span>我已有支付宝账户</span>
			<a href="" class="over">快速登陆</a>
			</div>
		</div>


		<div class="content">

			<div class="content-top">


				<img src="https://img.alicdn.com/tps/TB1POhqIFXXXXXbXFXXXXXXXXXX.png">

				<div class="content-bottom clearFix">

					<div class="f">
						<img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
						<a href="">我是服务商</a>
					</div>

					<div class="f">
						<img src="https://zos.alipayobjects.com/rmsportal/neqhNGwxBXBmhVY.png">
						<a href="">我是开发者</a>
					</div>

					<div class="f xu">
						<img src="https://img.alicdn.com/tps/TB12JNkIFXXXXXBXXXXXXXXXXXX.png">
						<a href="" class="sm">我是商家用户</a>
						<div class="mmm">
							<span>我是支付宝</span>
							<hr>
							<span>我是个人用户</span>
						</div>
					</div>

					<div class="f">
						<img src="https://gw.alipayobjects.com/mdn/rms_cfbd2a/afts/img/A*TQ_dRJ8sBb4AAAAAAAAAAAAAARQnAQ">
						<a href="">我是机构用户</a>
					</div>

					<div class="f">
						<img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
						<a href="">我是个人用户</a>
					</div>

				</div>

			</div>
		</div>

</div>


			<div class="qqq">
				<div>
				<a href="">
					蚂蚁集团|服务商平台|支付宝|余额宝|蚂蚁商家中心|芝麻信用|蚂蚁微贷|网商银行|开放平台|诚征英才|联系我们
				</a>
				</div>

				<div>
				<a href="">
					经营许可证编号：合字B2-20190046网站备案：沪公网安备31011502400925
				</a>	
				</div>

			</div>

			


</body>
</html>







